<template>
  <!-- <div class="space_module-wrapper" v-if="nowShowUserInfo"> -->
  <div class="space_module-wrapper">
    <headerModule :simple="true" />
    <div class="miva-wapper">
      <header class="header-block">
        <div class="h-info">
          <!-- <avatarModel :avatar="nowShowUserInfo.avatar" /> -->
          <mivaAvatar :avatar="nowShowUserInfo.avatar" />
          <div class="h-basic">
            <nicknameModel :userInfo="nowShowUserInfo" size="big" style="margin-left:5px" />
            <basicSpacingModel :edit="editSgin" :value="sign" v-if="loading" />
          </div>
        </div>
      </header>
      <div class="space-menu-wpr">
        <div class="group right">
          <template v-for="(menu, index) in menus">
            <span :class="['item',{active:index===menuAct}]" :key="index" @click="menuSwitch(index)">
              <i :class="['iconfont', menu.icon]" :style="{'color':menu.color}" />
              {{menu.name}}
            </span>
          </template>
        </div>
        <div class="group left">
          <mivaLink class="n-data">
            <div class="n-data-k">关注数</div>
            <div class="n-data-v">0</div>
          </mivaLink>
          <mivaLink class="n-data">
            <div class="n-data-k">粉丝数</div>
            <div class="n-data-v">0</div>
          </mivaLink>
        </div>
      </div>
      <!-- 路由容器 -->
      <components :is="nowPage" />
    </div>
    <mivaFooter size="small" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import headerModule from '@/components/header/index.vue';
import nicknameModel from '@/components/nickname.vue';
import basicSpacingModel from './private-components/basic-spacing.vue';
import mivaFooter from '@/components/footer/index.vue';
import home from './children/home.vue';
import setting from './children/setting.vue';
import favlist from './children/favlist.vue';
import { userInfoAPI } from '@/api/account';

export default {
    name: 'SpaceModule',
    components: {
        headerModule,
        nicknameModel,
        basicSpacingModel,
        home,
        favlist,
        setting,
        mivaFooter,
    },
    beforeRouteUpdate(to, from, next) {
        this.getUserInfo(to.params.uid);
        next();
    },
    data() {
        return {
            loading: false,
            nowShowUserInfo: {},
            menuAct: 0,
            menus: [
                { name: '主页', component: 'home', icon: 'icon-shouye1', color: '#00c091' },
                { name: '收藏', component: 'favlist', icon: 'icon-shoucang', color: '#f3a034' },
                { name: '设置', component: 'setting', icon: 'icon-shezhi1', color: '#23c9ed' },
            ],
        };
    },
    computed: {
        ...mapGetters([
            'userInfo',
        ]),
        nowPage() {
            return this.menus[this.menuAct].component;
        },
        paramsUid() {
            return this.$route.params.uid;
        },
        sign() {
            return this.nowShowUserInfo.sign;
        },
        editSgin() {
            return Number(this.paramsUid) === Number(this.userInfo.uid);
        },
    },
    created() {
        this.getUserInfo(this.paramsUid);
    },
    methods: {
        menuSwitch(index) {
            this.menuAct = index;
        },
        async getUserInfo(uid) {
            const { code, data } = await userInfoAPI(uid);
            this.loading = true;
            if (code === 404) {
                this.$router.replace({ name: 'notFound', params: { noLoading: true } });
                return;
            }
            this.nowShowUserInfo = data;
        },
    },
};
</script>

<style lang="less">
.space_module-wrapper {
  min-height: 100vh;
  background: #fff;
  .miva-wapper {
    width: @baseWidth;
    padding: 0;
  }
  .header-block {
    height: 200px;
    position: relative;
    background-image: url(~@/assets/default_header2.png);
    background-size: cover;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background-image: url(~@/assets/mask.png);
    }
    .h-info {
      width: 100%;
      padding: 20px 40px;
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
    }
    .h-basic {
      margin-left: 30px;
    }
  }

  .space-menu-wpr {
    height: 60px;
    padding: 0 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 0 0 1px #eee;
    border-radius: 0 0 4px 4px;
    font-size: 13px;
    user-select: none;
    .iconfont::before {
      margin-right: 5px;
      font-size: 22px;
    }
    .group {
      display: flex;
      line-height: 1;
      .item {
        display: flex;
        align-items: center;
        transition: all 0.3s;
        border-bottom: 3px solid transparent;
      }
      .item:hover {
        color: @base_color;
      }
      .active {
        color: @base_color;
        border-color: @base_color;
      }
    }
    .right {
      line-height: 60px;
    }
    .n-data {
      width: 58px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    .n-data-k {
      line-height: 14px;
      font-size: 12px;
      color: #99a2aa;
    }
    .n-data-v {
      line-height: 16px;
      margin-top: 5px;
      color: #222;
      font-size: 12px;
    }
    .item {
      margin-right: 20px;
    }
  }

  .s-space {
    background-color: #fff;
    box-shadow: 0 0 0 1px #eee;
    border-radius: 0 0 4px 4px;
  }
}
</style>
